{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京剧与昆曲</title>

    <!-- 引入 bootstrap css 和 js 文件 -->
    <link rel="stylesheet" href="{% static 'artworks/bootstrap/css/bootstrap.css'%}">
    <script src="{% static 'artworks/bootstrap/js/bootstrap.js'%}"></script>
    <link rel="stylesheet" href="{% static 'artworks/css/mystyle_comm.css'%}">

<body>
    <div class="container">
        头部
        <hr>
        <div class="row">
            <h1>京剧与昆曲</h1>
            <div class="col">
                <div>
                    <a href="kun/">昆曲</a>
                </div>
                <div>
                    <a href="jing/">京剧</a>
                </div>
            </div>
        </div>
        列表
        <hr>
        <div class="row">
            <div class="col">
                <ol>
                    {% for opera in opera_list %}
                    <li><img src="/media/{{opera.cover}}" height="50" width="50" />{{opera.typeName}} <a
                            href="/artworks/{{opera.pk}}">{{opera.title}}</a></li>
                    {% endfor %}
                </ol>
            </div>
        </div>
        详情
        <hr>
        <div class="row">
            <a href="/artworks/{{opera.pk}}/delete">删除</a>
            <h2>作品名: {{opera.title}}</h2>
            <h4>种 类:{{opera.typeName}}</h4>
            <h4>演唱者: {{opera.artist}}</h4>
            <hr>
            <p>内容描述: {{opera.desc}}</p>
        </div>
        卡片
        <hr>
        <div class="row">
            {% for opera in opera_list %}
            <div class="card" style="width: 18rem;">
                <img src="/media/{{opera.cover}}" class="card-img-top" alt="{{opera.title}}" height="300">
                <div class="card-body">
                    <h5 class="card-title">{{opera.title}}</h5>
                    <p class="card-text">{{opera.decp}}</p>
                    <a href="{{opera.link}}" class="btn btn-primary">观看</a>
                </div>
            </div>
            {% endfor %}
        </div>
        表单
        <hr>
        <div class="row">

        </div>
    </div>
</body>

</html>